import React, { Fragment } from 'react'
import { Card, Row, Col } from 'antd'
import PageHeaderLayout from '../../components/Layouts/PageHeaderLayout'
import Trend from '../../components/Trend'
import WaterWave from './WaterWave'
import Search from './Search'

export default () => {
  const components = [{
    title: 'Trend 增长趋势',
    component: (
      <Fragment>
        <Trend flag='up'>周增长 12% </Trend> <br />
        <Trend flag='down'>日降低 12% </Trend>
      </Fragment>
    ),
  }, {
    title: '水波纹',
    component: (
      <WaterWave percent={50} height={100} width={100} />
    )
  }]
  const submit = (values) => {
    console.log('提交内容：', values)
  }
  return (
    <PageHeaderLayout title='组件示例'>
      <Card>
        <Search submit={submit} />
        <Row gutter={24}>
          {components.map(item => (
            <Col key={item.title} xl={6} md={8} sm={12} xs={24}>
              <Card bordered title=''>
                {item.component}
              </Card>
            </Col>
          ))}
        </Row>
      </Card>
    </PageHeaderLayout>
  )
}
